<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                width: 100%;
                height: 100px;
                background-color: rgb(163, 82, 82);
                display: flex;
                justify-content: space-around;
                text-align: center;
                line-height: 100px;
                /* 透视 */
                perspective: 800px;
            }
            /* 1、3D位移 */
            .box1 {
                width: 100px;
                height: 100px;
                background-color: rgb(33, 130, 99);
                transition: all 2s;
            }

            .box1:hover {
                /* 3d位移 简写 */
                /* transform: translate3d(100px, 100px, 400px) */
                transform: translateX(100px);
                transform: translateY(100px);
                transform: translateZ(-200px);
            }
            /* 2、X轴旋转 */
            .box2{
             width: 100px;
             height: 100px;
             background-color: rgb(101, 40, 147);
             transition: all 2s;
            }
            .box2:hover{
             transform: rotateX(360deg);
            }
            /* 3、Y轴旋转 */
            .box3{
             width: 100px;
             height: 100px;
             background-color: rgb(40, 147, 58);
             transition: all 2s;
            }
            .box3:hover{
             transform: rotateY(360deg);
            }
            /* 4、Z轴旋转 */
            .box4{
             width: 100px;
             height: 100px;
             background-color: rgb(147, 92, 40);
             transition: all 2s;
            }
            .box4:hover{
             transform: rotateZ(360deg);
            }
        </style>
    </head>

    <body>
        <div class="box">
            <div class="box1">3d位移</div>
            <div class="box2">X轴旋转</div>
            <div class="box3">Y轴旋转</div>
            <div class="box4">Z轴旋转</div>
        </div>
    </body>

    </html>
</body>

</html>